<template>
	<view class="pages" :class="themeName">
		<u-notice-bar :show="showTips" mode="horizontal" :list="list" :font-size="26" :close-icon="true" :speed="100"
			@close="showTips=false"></u-notice-bar>
		<view class="user-spread">
			<view class="header p-t-30" :style="[infoStyle]">
				<view class="user-info flex m-l-30">
					<view class="user-avatar">
						<u-image width="110rpx" height="110rpx" border-radius="60" :src="user.avatar" />
					
					</view>
					<view class="user-message m-l-20 white">
						<view class="m-b-10">
							<view class="xxl bold  m-r-20">{{user.nickname}}</view>
						</view>
						<view class="avatar-tag white xxs text-center m-b-10" v-if="distributionInfo.level_name">
							{{distributionInfo.level_name}}
						</view>
						<view class="xs flex">
							上级分销商：{{leaderInfo.nickname ? leaderInfo.nickname :  '无'}}
							<view v-if="!leaderInfo.nickname" class="br60 white write-btn flex row-center m-l-30 xxs"
								@tap="showBind=true">填写
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="main">
				<!-- 填表格 -->
				<view v-if="status == 0" class="user-apply">
					<view class="user-apply-top flex-col col-center">
						<view class="title xxl normal bold">申请成为分销会员</view>
						<view class="apply-form">
							<view class="form-item">
								<u-field v-model="real_name" :label-width="150" label="真实姓名：" :border-bottom="false"
									placeholder="请输入您的真实姓名">
								</u-field>
							</view>

							<view class="form-item">
								<u-field v-model="mobile" :label-width="150" label="手机号码：" :border-bottom="false"
									placeholder="请输入您的手机号码">
								</u-field>
							</view>
							<view class="form-item" @tap="showRegion=true">
								<u-field v-model="region" disabled right-icon="arrow-right" :label-width="150"
									label="现住省份：" :border-bottom="false" placeholder="请选择省、市、区">
								</u-field>
							</view>
							<view class="form-item">
								<u-field v-model="reason" :label-width="150" type="textarea" label="申请原因："
									placeholder="（必填）" :field-style="{ 'min-height': '160rpx'}" />
							</view>
						</view>
					</view>
					<view class="m-t-40 muted xs flex row-left" v-if="distributionInfo.protocol_show == 1">
						<view class="" style="width: 34rpx;">
							<u-checkbox v-model="checked" :active-color="themeColor" shape="circle">
							</u-checkbox>
						</view>
						<view class="m-l-15">
							本人已阅读并同意<span :style="{ color: themeColor }" @click="goTo()">《分销协议》</span>
						</view>
					</view>
					<button size="lg" class="apply-btn white br60 m-t-15" @tap="handleApply">
						立即申请
					</button>
					<view class="m-t-20 xxs lighter flex row-center">提交成功后，我们将会在1-2个工作日内给您回复</view>
				</view>

				<!-- 申请状态 -->
				<view v-if="status==2" class="apply-result">
					<view class="apply-result-top flex-col col-center">
						<!-- <view class="title xxl normal bold">申请成为分销会员</view> -->
						<image class="apply-result-img"
							:src="applyObject.status == 2 ? '/static/images/icon_fail.png' : '/static/images/icon_wait.png'" />
						<view class="m-t-10 bold" style="line-height: 40rpx">{{applyObject.status_tips}}</view>
						<view v-if="applyObject.status == 2 && applyObject.audit_remark" class="apply-fail-reason sm">
							失败原因：{{applyObject.audit_remark}}
						</view>

						<view class="apply-result-info">
							<view class="info-item flex">
								<view class="label">真实姓名：</view>
								<view class="info-text ml20">{{applyObject.real_name}}</view>
							</view>
							<view class="info-item flex">
								<view class="label">手机号码：</view>
								<view class="info-text ml20">{{applyObject.mobile}}</view>
							</view>
							<view class="info-item flex">
								<view class="label">现住省份：</view>
								<view class="info-text ml20">{{applyObject.province}} {{applyObject.city}}
									{{applyObject.district}}
								</view>
							</view>
							<view class="info-item flex">
								<view class="label">申请原因：</view>
								<view class="info-text ml20">{{applyObject.reason ? applyObject.reason : '-'}}</view>
							</view>
						</view>
					</view>
					<template v-if="applyObject.status == 2">
						<button size="lg" class="apply-btn white br60 m-t-30" @tap="status=0">
							重新申请
						</button>
						<view class="m-t-20 xxs lighter flex row-center">提交成功后，我们将会在1-2个工作日内给您回复</view>
					</template>
				</view>

				<!-- 已申请 -->
				<view v-if="status==1" class="spread-info">
					<view class="user-assets">
						<view class="user-assets-header flex row-between">
							<view class="flex bold">
								可提现佣金：
								<view class="money">
									<text class="sm">￥</text>
									<text class="xl">{{distributionInfo.able_withdrawal}}</text>
								</view>
							</view>
						</view>
						<view class="user-assets-content flex  flex-wrap">
							<view class="user-item flex-col col-center">
								<view class="user-assets-name flex">
									今日预估收益
								</view>
								<view class="assets m-l-20">
									<view class="money">
										<text class="sm">￥</text>
										<text class="xl">{{distributionInfo.today_earnings}}</text>
									</view>
								</view>
							</view>
							<view class="user-item flex-col col-center">
								<view class="nr user-assets-name flex">
									本月预估收益
								</view>
								<view class="assets m-l-20">
									<view class="money">
										<text class="sm">￥</text>
										<text class="xl">{{distributionInfo.month_earnings}}</text>
									</view>
								</view>
							</view>
							<view class="user-item flex-col col-center">
								<view class="nr user-assets-name flex">
									累计获得收益
								</view>
								<view class="assets">
									<view class="money">
										<text class="sm">￥</text>
										<text class="xl">{{distributionInfo.history_earnings}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- <view class="m-t-20 user-fans flex bg-white md">
						<router-link class="flex-1" to="/bundle/pages/user_fans/user_fans">
							<view class="my-fans flex row-center">
								我的粉丝 <view class="m-l-10 fans-num">{{distributionInfo.fans}}</view>
								<u-icon class="m-l-10" name="arrow-right" size="28rpx" color="#666" />
							</view>
						</router-link>
					</view>
					<view class="user-invite m-t-20 bg-white flex-col col-center">
						<view class="sm">我的邀请码</view>
						<view class="flex bold m-t-20" style="font-size: 42rpx;">
							{{distributionInfo.code}}
							<view class="invite-copy-btn m-l-10 xxs" @click="$copy(distributionInfo.code)">点击复制</view>
						</view>
					</view> -->
					
					<view class="bg-white m-t-20 flex flex-1 p-t-28 p-b-14 fans-invite">
						<!-- 我的粉丝 -->
						<router-link class="flex-1 flex-col col-center row-center" to="/bundle/pages/user_fans/user_fans">
							<view class="my-fans flex row-center">
								我的粉丝 
							</view>
							<view class="text-center m-t-20 m-b-44" style="font-size: 42rpx;">{{distributionInfo.fans}}</view>
						</router-link>
						<!-- 我的邀请码 -->
						<view class="flex-1 flex-col col-center row-center">
							<view class="sm">我的邀请码</view>
							<view class="flex bold m-t-20" style="font-size: 42rpx;">
								{{distributionInfo.code}}
							</view>
							<view class="invite-copy-btn xxs m-t-6" @click="$copy(distributionInfo.code)">点击复制</view>
						</view>
					</view>
					
					<view class="usual-tools bg-white m-t-20">
						<view class="usual-tools-header flex lg bold">
							常用工具
						</view>
						<view class="usual-content flex">

							<router-link class="usual-item" to="/bundle/pages/user_spread_order/user_spread_order">
								<view class="flex-col col-center">
									<image src="/bundle/static/images/icon_fenxiao.png" class="usual-item-img"></image>
									<view class="nr normal m-t-20" style="line-height: 40rpx">分销订单</view>
								</view>
							</router-link>
							<router-link class="usual-item" to="/bundle/pages/commission_details/commission_details">
								<view class="flex-col col-center">
									<image src="/bundle/static/images/icon_yongjin.png" class="usual-item-img"></image>
									<view class="nr normal m-t-20" style="line-height: 40rpx">佣金明细</view>
								</view>
							</router-link>
							<router-link class="usual-item" to="/bundle/pages/monthly_bill/monthly_bill">
								<view class="flex-col col-center">
									<image src="/bundle/static/images/icon_zhangdan.png" class="usual-item-img"></image>
									<view class="nr normal m-t-20" style="line-height: 40rpx">月度账单</view>
								</view>
							</router-link>
						</view>
					</view>
				</view>
			</view>
			<u-popup v-model="showBind" mode="center" closeable border-radius="30">
				<view class="inviteform-contain flex-col col-center">
					<view class="title xl">填写邀请码</view>
					<view class="input-row flex">
						<u-field v-model="inviteCode" :label-width="140" label="邀请码：" :border-bottom="false"
							placeholder="请输入邀请码">
						</u-field>
					</view>
					<view class="btn bg-primary white flex row-center" @tap="handleBind">确定</view>
				</view>
			</u-popup>
			<u-picker
				v-model="showRegion"
				:confirm-color="themeColor"
				cancel-color="#999"
				mode="region"
				@confirm="regionChange"
			>
			</u-picker>
		</view>
		<loading-view v-show="loading"></loading-view>
	</view>

</template>

<script>
	import {
		apiDistributionIndex,
		apiDistributionApply,
		apiDistributionApplyDetail,
		apiDistributionCode
	} from "@/api/user";
	import {
		copy
	} from '@/utils/tools'
	export default {
		data() {
			return {
				loading: true,
				// 提示
				showTips: true,
				list: ['成为分销会员，推广下级可获得额外收益，推广越多收益越多'],
				// 地区
				region: '',
				showRegion: false,
				// 用户信息
				user: {},
				// 上级信息
				leaderInfo: {},
				// 分销主页数据
				distributionInfo: {},
				// 申请状态 0 ==> 未申请 2 ==> 申请进度 1 ==> 已申请
				status: 0,
				showBind: false,
				inviteCode: '',

				// 审核信息对象
				applyObject: {},
				real_name: '',
				province: '',
				city: '',
				district: '',
				reason: '',
				mobile: '',
				
				checked: false, // 是否同意分销协议
			};
		},
		onLoad(options) {
			// 获取上级及个人信息
			this.getDistributionIndex()
		},
		
		computed: {
			infoStyle() {
				const {
					top_apply_image
				} = this.distributionInfo
				if (!top_apply_image) {
					return {}
				}
				return {
					'background-image': `url(${this.distributionInfo.top_apply_image})`,
					'background-repeat': 'no-repeat',
					'background-size': 'cover',
				}
			}
		},

		methods: {
			// 分销会员信息
			async getDistributionIndex() {
				apiDistributionIndex().then((res) => {
					this.distributionInfo = res
					this.user = res.user
					this.leaderInfo = res.leader
					this.status = res.is_distributon
					if (this.status == 0) {
						// 非分销
						this.getApplyDetail()
						return
					}
					this.loading = false
				})
			},
			// 申请分销
			handleApply() {
				
				if(this.distributionInfo.protocol_show == 1 && this.status == 0 && !this.checked) {
					return this.$toast({title: '请先勾选同意分销协议'})
				}
				
				const {
					real_name,
					province,
					city,
					district,
					reason,
					mobile,
					region
				} = this
				if (!real_name) {
					this.$toast({
						title: "请填写真实姓名"
					});
					return;
				}

				if (!region.length) {
					this.$toast({
						title: "请选择省市区"
					});
					return;
				}
				apiDistributionApply({
					real_name,
					province,
					city,
					district,
					reason,
					mobile,
					region
				}).then(() => {
					this.getApplyDetail()
				})
			},
			// 最新分销会员申请详情
			getApplyDetail() {
				apiDistributionApplyDetail().then((res) => {
					switch (res.status) {
						case 0:
						case 2:
							this.applyObject = res
							this.status = 2
					}
				}).finally(() => {
					this.loading = false
				})
			},
			// 地区选择
			regionChange(region) {
				const { city, province, area } = region
				this.region = province.label + " " + city.label + " " + area.label
				this.province = province.value;
				this.city = city.value;
				this.district = area.value
			},



			// 填写邀请码
			handleBind() {
				apiDistributionCode({
					code: this.inviteCode
				}).then(res => {
					this.getDistributionIndex()
					this.showBind = false
				});
			},
			
			// 去到分销协议页面
			goTo() {
				this.$Router.push({
					path: '/bundle/pages/server_explan/server_explan',
					query: {
						type: 3,
					}
				})
			}

		}
	};
</script>
<style lang="scss">
	.user-spread {
		.header {
			@include background_image(90deg, 0%, 100%, '../../static/images/spread_bg.png');
			background-repeat: no-repeat;
			background-size: 100% 100%;
			height: 300rpx;
			
			.user-info {
				.avatar-tag {
					bottom: -10rpx;
					display: inline-block;
					background-color: #F79C0C;
					border: 1rpx solid #FFFFFF;
					border-radius: 100rpx;
					line-height: 34rpx;
					padding: 0 10rpx;
				}

				.user-message {
					.write-btn {
						height: 42rpx;
						width: 100rpx;
						background-color: #FF838D;
					}
				}
			}
		}

		.main {
			margin-top: -90rpx;
			z-index: 2;
			padding: 0 20rpx;

			.apply-btn {
				@include background_color();
			}

			.user-apply {
				.user-apply-top {
					background-color: white;
					padding: 40rpx 0 0rpx;
					border-radius: 20rpx;

					.apply-form {
						width: 100%;
						margin-top: 60rpx;

						.form-item {
							border: $-solid-border;
							margin: 0 30rpx 30rpx;
							border-radius: 6rpx;
						}
					}
				}


			}

			.apply-result {
				.apply-result-top {
					background-color: white;
					padding: 36rpx 14rpx 50rpx;
					border-radius: 20rpx;

					.apply-result-img {
						width: 100rpx;
						height: 100rpx;
						margin: 60rpx 0 24rpx;
					}

					.apply-fail-reason {
						color: #FF2C3C;
						margin-top: 10rpx;
					}
				}

				.apply-result-info {
					margin-top: 42rpx;
					width: 100%;

					.info-item {
						margin-left: 60rpx;
						margin-bottom: 28rpx;
						line-height: 30rpx;

						.label {
							width: 160rpx;
							color: $-color-lighter;
						}
					}
				}
			}

			.spread-info {
				.user-assets {
					background-color: #fff;
					border-radius: 20rpx;
					padding: 10rpx 20rpx 22rpx;
					background: linear-gradient(90deg, #FBEFDB 0%, #FED09E 100%);
					color: #8F430E;
					.money {
						color: #FF2C3C;
						font-weight: 500;
					}
					.user-assets-header {
						border-bottom: 1rpx dashed #8F430E;
						padding-bottom: 4rpx;
						height: 80rpx;
					}
					
					.user-assets-content {
						margin-top: 30rpx;
					
						.user-item {
							flex: 1;
							position: relative;

							.user-assets-name {
								text-align: left;
								align-self: flex-start;
							}

							.assets {
								margin-top: 14rpx;
								text-align: left;
								align-self: flex-start;
							}
						}
					}
				}

				// .user-fans {
				// 	border-radius: 10rpx;

				// 	.my-fans {
				// 		height: 120rpx;

				// 		.fans-num {
				// 			color: #FF2C3C;
				// 		}
				// 	}
				// }

				// .user-invite {
				// 	padding: 26rpx 0 57rpx;
				// 	border-radius: 10rpx;

				// 	.invite-copy-btn {
				// 		line-height: 30rpx;
				// 		padding: 6rpx 18rpx;
				// 		background: linear-gradient(90deg, #FEE4B4 0%, #FBCB96 100%);
				// 		color: #8F430E;
				// 		border-radius: 4rpx;
				// 		margin-left: 12rpx;
				// 	}
				// }
				
				.fans-invite {
					border-radius: 20rpx;
					.invite-copy-btn {
						line-height: 30rpx;
						padding: 6rpx 18rpx;
						background: linear-gradient(90deg, #FEE4B4 0%, #FBCB96 100%);
						color: #8F430E;
						border-radius: 4rpx;
						margin-left: 12rpx;
					}
				}

				.usual-tools {
					border-radius: 20rpx;
					padding: 0 25rpx;

					.usual-tools-header {
						height: 100rpx;
						border-bottom: $-solid-border;
					}

					.usual-content {
						padding: 40rpx 0;

						.usual-item {
							width: 25%;

							.usual-item-img {
								width: 56rpx;
								height: 56rpx;
								flex: none;
							}

						}
					}
				}
			}
		}



		/* 弹窗 */
		.inviteform-contain {
			padding-left: 30rpx;
			padding-right: 30rpx;
			padding-bottom: 30rpx;
			width: 580rpx;
			border-radius: 6rpx;
			background-color: $-color-white;
			.title {
				padding: 26rpx 0rpx;
			}
			.input-row {
				border: $-solid-border;
				border-radius: 4rpx;
			}
			.btn {
				height: 80rpx;
				padding: 0 180rpx;
				border-radius: 10rpx;
				margin-top: 60rpx;
				@include background_color();
			}
		}

	}
</style>
